<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.c {
				width: 200px;
				height: 20px;
				margin-top: 10px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>

	<body>
		<div>
			<input class="c" maxlength="20" type="text" id="user"  placeholder="用户名(6~20位字母或者数字)" />
			<p id="usertishi" style="display:none;color: red;">昵称需在6-20位字母数字间</p>
		</div>
		<div>
			<input class="c" type="text"  id="pwd" placeholder="密码" />
			<p id="pwdtishi" style="display:none;color: red;">密码不允许为空或者少于6~20位的字母或者数字</p>
		</div>
		<div>
			<input class="c" type="text"  id="phone" maxlength="11" placeholder="手机号码" />
			<p id="phonetishi" style="display:none;color: red;">手机号不合法</p>
		</div>
		<div>
			<input class="c" type="text"  id="code"  placeholder="验证码" />
			<input type="button" onclick="getcode()" id="clickcode" value="获取验证码" />
		</div>
		<div>
			<input type="checkbox" onclick="checka()" id="check" /> 我已阅读并接受
			<span style="color:dodgerblue;">《聚合用户服务协议》</span>
		</div>
		<button id="zc" onclick="tj()" disabled="disabled" style="color: cornflowerblue; text-align: center;">注册</button>
		<script>
			function checka(){
				var checks=document.getElementById("check");
				if(checks.checked==true){
					document.getElementById("zc").disabled=false;
					
				}else{
					document.getElementById("zc").disabled=true;
				}
				
			};
			function tj() { 
				var user = document.getElementById("user").value;
				var pwd = document.getElementById("pwd").value;
				var phone = document.getElementById("phone").value;
				if(user.length < 6 || user.length == "") { 
					document.getElementById("usertishi").style.display = "inline"; //显示
				} else {
					document.getElementById("usertishi").style.display = "none"; //隐藏
				};
				if(pwd.length < 6 || pwd.length == "") { //验证密码
					document.getElementById("pwdtishi").style.display = "inline"; //显示
				} else {
					document.getElementById("pwdtishi").style.display = "none"; //隐藏
				}
				if(phone.length < 11 || phone.length == "") { //验证手机号
					document.getElementById("phonetishi").style.display = "inline"; //显示
				} else {
					document.getElementById("phonetishi").style.display = "none"; //隐藏
				}
			};
			var count = 60;
			function getcode() { //点击获取验证码的方法
				if(count == 0) {
					document.getElementById("clickcode").disabled = false;
					document.getElementById("clickcode").value = "获取验证码";
					count = 5;
					return false;
				} else {
					document.getElementById("clickcode").disabled = true;
					document.getElementById("clickcode").value = count + "秒后重新发送";
					//alert("验证码:123 ");
					count--;
				}
				setTimeout(function() {
					getcode();
				}, 1000);
			}
		
		</script>
	</body>

</html>